<template>
  <div id="subject">
    <el-col :span="24" class="action-bar">
      <el-input v-model="searchKeyWord" class="action-bar-input" placeholder="请输入关键字"></el-input>
      <el-select v-model="questionBankId" placeholder="所属题库" class="action-bar-input">
        <el-option v-for="item in questionBankOptions" :label="item.name" :key="item.id" :value="item.id"></el-option>
        <el-option label="全部题库" value=""></el-option>
      </el-select>
      <el-button type="primary" size="medium" @click="search">检索</el-button>
      <el-button type="primary" size="medium" @click="addSubject">添加题目</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="tableList" highlight-current-row class="el-table-style">
      <el-table-column type="index" width="75" sortable></el-table-column>
      <el-table-column prop="question" label="题目名称" width="400" sortable></el-table-column>
      <el-table-column prop="qp_name" label="所属题库" width="300" sortable></el-table-column>
      <el-table-column prop="score" label="分数" min-width="150" sortable></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" class="danger-btn" size="mini" @click="toOptionList(scope.row.id)">选项</el-button>
          <el-button type="primary" class="danger-btn" size="mini" @click="questionsDetail(scope.row.id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delQuestions(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </el-col>

    <!-- 添加 -->
    <!-- 新增 -->
    <el-dialog title="添加/编辑题目" :visible.sync="addFormVisible" width="30%">
      <el-form label-width="110px" label-position="left">
        <el-form-item label="所属题库">
          <el-select
            v-model="addForm.qp_id"
            placeholder="选择所属题库"
            style="margin-right:20px"
          >
            <el-option
              v-for="item in questionBankOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目名称">
          <el-input type="textarea" :rows="4" v-model="addForm.question" ></el-input>
        </el-form-item>
        <el-form-item label="题目类别">
          <el-select v-model="addForm.desc" placeholder="题目类型" class="action-bar-input">
            <el-option label="单选题" value="该题目为单选题"></el-option>
            <el-option label="多选题" value="该题目为多选题"></el-option>
            <el-option label="判断题" value="该题目为判断题"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="addForm.score" style="width:200px" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addQuestions">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "subject",
    data() {
      return {
        searchKeyWord:'',//搜索的关键字
        questionBankId: '',//搜索的题库ID
        tableList:[],//题目数据
        questionBankOptions:[],//题库数据
        page:1,
        total:0,
        pagesize: 10,
        addFormVisible:false,
        addForm:{}
      }
    },
    mounted(){
      this.questionsPackageList();
      this.getquestionsList();
    },
    methods: {
      //获取题库列表
      async questionsPackageList(){
        const res = await this.$api.questionsPackageList();
        if (res.data.level == 'success'){
          this.questionBankOptions = res.data.data;
        }else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      },
      //获取题目列表
      async getquestionsList(){
        let params = {
          page: this.page,
          limit: this.pagesize,
          keyword: this.searchKeyWord,
          qp_id: this.questionBankId
        }
        const res = await this.$api.questionsList(params);
        if (res.data.level == 'success') {
          this.tableList = res.data.data;
          this.total = res.data.page_info.total;
        }else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      },
      //获取题目详情
      async questionsDetail(id){
        let params = {
          id: id
        }
        const res = await this.$api.questionsDetail(params);
        if (res.data.level == 'success'){
          this.addForm = res.data.data;
          this.addForm.qp_id = parseInt(this.addForm.qp_id);
          this.addFormVisible = true;
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      },
      //添加题目
      async addQuestions(){
        let params = this.addForm;
        const res = await this.$api.addQuestions(params);
        if (res.data.level == 'success'){
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.addFormVisible=false;
          this.getquestionsList();
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      },
      //删除题目
      async delQuestions(id){
        let params = {
          id: id
        }
        const res = await this.$api.delQuestions(params);
        if (res.data.level == 'success'){
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.getquestionsList();
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      },
      //检索
      search(){
        this.getquestionsList();
      },
      addSubject(){
        this.addForm = {}
        this.addFormVisible=true;
      },
      pageChange(e){
        this.page = e;
        this.getquestionsList();
      },
      //跳转到选项列表
      toOptionList(id){
        this.$router.push({
          path: '/optionList',
          query:{
            tm_id : id
          }
        })
      }
    },
  };
</script>
<style lang="scss" scoped>
  .dialog-footer{
    text-align: center
  }
</style>
